Skip to content

[HDX-5307] Drop the search bar WHERE label and / keycap - #3152

Merged
elizabetdev merged 1 commit into
elizabet/hdx-5307-always-visible-query-fieldsfrom
elizabet/hdx-5307-search-bar-chrome
Sep 19, 2026
Merged

elizabetdev merged 1 commit into
elizabet/hdx-5307-always-visible-query-fieldsfrom
elizabet/hdx-5307-search-bar-chrome

Conversation

@elizabetdev

Copy link
Copy Markdown
Member

Summary

  • Stacked on the always-visible query fields PR: drop the redundant WHERE label and the / keycap overlay.
  • / and s still focus the input. Adds focus-border E2E coverage.

Test plan

  • Empty SQL bar shows the placeholder and no WHERE label.
  • / and s still focus the input with no keycap overlay.
  • make dev-e2e FILE=input-focus

@vercel

vercel Bot commented Sep 18, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
hyperdx-oss Ready Ready Preview Sep 18, 2026 10:59am UTC
hyperdx-storybook Ready Ready Preview Sep 18, 2026 10:59am UTC

Request Review

@changeset-bot

changeset-bot Bot commented Sep 18, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: f2401b2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@hyperdx/app Patch
@hyperdx/api Patch
@hyperdx/otel-collector Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@greptile-apps

greptile-apps Bot commented Sep 18, 2026 •

Copy link
Copy Markdown
Contributor

RetriggerConfidence Score: 4/5

The UI changes appear sound, but the PR is not yet safe to merge because the E2E clause-field locators still target editors by page-global position.

Fix All in Claude CodeFindings

  1. P1 SQL shifts editor targets ▶

Summary

Removes the redundant SQL WHERE label and / shortcut overlay while retaining keyboard focus behavior. It also consolidates variable-validation border state and adjusts multiline-input E2E helpers and page-object locators.

  • Removes obsolete label and shortcut-overlay properties, rendering, styles, stories, and tests.
  • Keeps language switching in SearchWhereInput while deleting unused language props from fixed-language editors.
  • Adds shared error/warning state selection for SQL, Lucene, and PromQL editors.
  • Updates E2E field sizing and focus assertions.

Reviews (2) · Last reviewed commit: "fix(app): drop the search bar WHERE labe..."

Comment on lines +44 to +54
const selectBlurred = await searchPage.getSelectBorderColor();
await searchPage.getSELECTEditor().focus();
await expect
.poll(() => searchPage.getSelectBorderColor())
.not.toBe(selectBlurred);

const orderByBlurred = await searchPage.getOrderByBorderColor();
await searchPage.getOrderByEditor().focus();
await expect
.poll(() => searchPage.getOrderByBorderColor())
.not.toBe(orderByBlurred);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 SQL shifts editor targets

The query language persists in localStorage. When it is SQL, the WHERE field becomes the first CodeMirror editor, so these page-global index locators focus WHERE and SELECT instead of SELECT and ORDER BY. The test then polls borders on different fields and times out rather than validating the intended focus states. Use the existing label-scoped clause fields, whose targets do not depend on editor order.

Suggested change
const selectBlurred = await searchPage.getSelectBorderColor();
await searchPage.getSELECTEditor().focus();
await expect
.poll(() => searchPage.getSelectBorderColor())
.not.toBe(selectBlurred);
const orderByBlurred = await searchPage.getOrderByBorderColor();
await searchPage.getOrderByEditor().focus();
await expect
.poll(() => searchPage.getOrderByBorderColor())
.not.toBe(orderByBlurred);
const selectBlurred = await searchPage.getSelectBorderColor();
await searchPage.selectClauseField().focusTarget.focus();
await expect
.poll(() => searchPage.getSelectBorderColor())
.not.toBe(selectBlurred);
const orderByBlurred = await searchPage.getOrderByBorderColor();
await searchPage.orderByClauseField().focusTarget.focus();
await expect
.poll(() => searchPage.getOrderByBorderColor())
.not.toBe(orderByBlurred);

Fix in Claude Code Fix in Conductor Fix in Cursor Fix in Codex

@github-actions

github-actions Bot commented Sep 18, 2026 •

Copy link
Copy Markdown
Contributor

Deep Review

✅ No critical issues found.

This is a clean, mechanical removal: the WHERE label and / keycap overlay are dropped from SearchWhereInput, the showLabel/label props and .shortcutHint SCSS are deleted, and the Kbd import, position: relative, callers, stories, and tests are all updated consistently. Reviewers confirmed no dangling references, the / and s hotkeys are untouched (they focus via refs in SearchInputV2.tsx and SQLInlineEditor.tsx and never depended on the overlay), and removing position: relative breaks nothing since the only absolutely-positioned child was the removed keycap and dropdowns/tooltips are portaled.

🟡 P2 -- recommended

  • packages/app/src/components/SearchInput/__tests__/SearchWhereInput.test.tsx:142 -- The replacement SQL-mode test asserts the language combobox reads SQL and the Lucene placeholder is absent, but never asserts the WHERE label is gone, so the PR's headline change has no regression guard and reintroducing the label leaves the suite green.
    • Fix: Add expect(screen.queryByText('WHERE')).not.toBeInTheDocument(); to the renders the SQL editor when whereLanguage is sql test.
    • testing, previous-comments
🔵 P3 nitpicks (1)
  • packages/app/src/components/SearchInput/__tests__/SearchWhereInput.test.tsx:92 -- The keycap-absence assertion lives only in the Lucene-mode test, but the removed <Kbd>/</Kbd> previously rendered in both languages, so a regression that reintroduces it in SQL mode would go uncaught.
    • Fix: Add an equivalent expect(container.querySelector('kbd')).not.toBeInTheDocument(); assertion to a defaultLanguage="sql" test.

Reviewers (6): correctness, testing, maintainability, kieran-typescript, julik-frontend-races, previous-comments.

Testing gaps:

  • No unit test simulates the / or s hotkey and asserts focus moves to the input, despite the PR test plan claiming this behavior is preserved; the focus logic is delegated to unchanged child components, so this is a pre-existing gap rather than a diff-introduced regression.

renderWithMantine(<TestWrapper defaultLanguage="sql" />);

expect(screen.getByText('WHERE')).toBeInTheDocument();
expect(

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔵 minor — No test pins the removal of the WHERE label, the PR's main change

The label only ever rendered in SQL mode (it was passed to SQLInlineEditorControlled), and this diff deletes both tests that covered it (renders SQL input with WHERE label and hides label when showLabel is false). The replacement asserts the language combobox reads SQL and that the Lucene placeholder is absent — both true whether or not a WHERE label renders — so reintroducing the label leaves the suite green. Add expect(screen.queryByText('WHERE')).not.toBeInTheDocument(); to this SQL-mode test. (The new kbd assertion at line 92 lives in the Lucene block, and the keycap rendered in both languages, so it likewise wouldn't catch a SQL-only regression.)

{ name: 'SQL', select: (p: SearchPage) => p.switchToSQLMode() },
];

test('marks the WHERE input as focused in both languages', async ({

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔵 minor — New E2E spec never exercises the behaviour this PR claims to preserve

Both tests assert focus border colors on WHERE/SELECT/ORDER BY — the behaviour of the stacked "always-visible query fields" change, not of this diff — while the PR's own test-plan line ("/ and s still focus the input") has no automated coverage in either the unit test or here. Since this diff deletes the keycap that advertised the shortcut, add a case that presses / (and s) on the search page and asserts the WHERE input holds focus: await page.keyboard.press('/') then assert on searchPage.whereInput.luceneInput / .sqlEditor being focused. The hotkey lives in SearchInputV2.tsx:138 and SQLInlineEditor.tsx:230, gated on enableHotkey, and nothing currently tests either.

await searchPage.goto();

const selectBlurred = await searchPage.getSelectBorderColor();
await searchPage.getSELECTEditor().focus();

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔵 minor — Focuses the editor by .cm-content index but measures the border by label

getSELECTEditor()/getOrderByEditor() (SearchPage.ts:349,395) resolve .cm-content by position, while getSelectBorderColor()/getOrderByBorderColor() (SearchPage.ts:353,359) resolve the Paper from the SELECT/ORDER BY label — so the element focused and the element measured are located two different ways in the same assertion, and SearchPage.ts:365-371 documents the index lookup as shifting with the WHERE language. Use the label-based field the page object already provides (and that features/shared/multiline.spec.ts:63-66 uses): await searchPage.selectClauseField().focusTarget.focus() and await searchPage.orderByClauseField().focusTarget.focus().

const searchPage = new SearchPage(page);
await searchPage.goto();

for (const language of languages) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔵 minor — languages[].name is never read, so a failure can't say which language broke

language.name (lines 12-13) has no reader — only language.select is used — and both languages are asserted inside one test, so a failure in the SQL iteration reports only marks the WHERE input as focused in both languages. Either wrap the body in await test.step(language.name, async () => { ... }), or parametrize with for (const language of languages) test(\marks the WHERE input as focused in ${language.name}`, ...)asmultiline.spec.ts:39-53` does, so the name earns its keep.

@github-actions

github-actions Bot commented Sep 18, 2026 •

Copy link
Copy Markdown
Contributor

PR Review

1 finding(s): 🔴 0 critical · 🟠 0 major · 🔵 1 minor

1 posted as inline comment(s) on the changed lines.


Severity is the reviewer's own estimate and is used for ordering, not filtering.

The label repeated the SQL placeholder, and the overlay clipped long queries. Keyboard shortcuts still focus the input.

Co-authored-by: Cursor <cursoragent@cursor.com>

expect(screen.getByText('WHERE')).toBeInTheDocument();
expect(
screen.getByRole('combobox', { name: 'Query language' }),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔵 minor — Rewritten SQL-mode test asserts nothing about the SQL editor it is named for

The old assertion (getByText('WHERE')) proved the SQL branch rendered, because the label lived inside SQLInlineEditor. The replacements do not: the Query language combobox renders in both languages and its value comes straight from the form default the test itself set, and the missing Lucene placeholder is only an absence. Replacing isSql ? <SQLInlineEditorControlled …/> with isSql ? null in SearchWhereInput.tsx:228 keeps this test green. Assert on the SQL editor itself — e.g. expect(container.querySelector('.cm-editor')).toBeInTheDocument() — or fold this case into the neighbouring renders SQL placeholder test, which is currently the only thing covering that branch.

@elizabetdev
elizabetdev merged commit 62780c7 into elizabet/hdx-5307-always-visible-query-fields Sep 19, 2026
8 checks passed
kodiakhq Bot pushed a commit that referenced this pull request Sep 21, 2026
## Summary
- Drop the redundant `WHERE` label and the `/` keycap overlay from the search bar.
- `/` and `s` still focus the input.
- Re-opened against `main` after #3152 merged into the stacked base branch instead of `main` (#3150 had already landed).

## Test plan
- [ ] Empty SQL bar shows the placeholder and no `WHERE` label.
- [ ] `/` and `s` still focus the input with no keycap overlay.

This branch was successfully deployed

2 active deployments
Preview – hyperdx-oss — f2401b28 Deployed Sep 18, 2026 by vercel[bot]
Preview – hyperdx-storybook — f2401b28 Deployed Sep 18, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants